<template>
  <div class="app-add-user">
    <div class="app-main">
      <div class="module-list">
        <div class="module-list-none" v-if="userList.length<=0">
          暂无员工
        </div>
      <mt-index-list v-if="userList.length>0">
        <mt-index-section v-for="(list,listIndex) in userList" :index="list.firstLetter">
          <mt-cell v-for="(item,index) in list.userList" :title="item.name" >
            <span class="iconfont icon-bianji" @click="handleEdit(item)"></span>
            <span class="iconfont icon-shanchu" @click="handleRemove(item)"></span>
          </mt-cell>
        </mt-index-section>
      </mt-index-list>
      </div>
      <mt-popup
        v-model="popupAdd"
        position="right"
        class="popup-add">
        <template>
          <mt-field label="手机号码" placeholder="手机号将作为登陆账号" v-model="form.phone"></mt-field>
          <mt-field v-if="isShowPwd" label="登录密码" placeholder="默认111111" value="默认111111" disabled="disabled"></mt-field>
          <mt-field label="员工姓名" placeholder="请输入员工姓名" v-model="form.name"></mt-field>
          <mt-field class="field-part" label="所在部门" placeholder="请选择所在部门" v-model="form.departmentName" readonly="readonly" @click.native="handleSelectPart"></mt-field>

          <!--<mt-cell-->
            <!--title="帐号类型" class="mint-field">-->
            <!--<select v-model="form.accountType" class="select-operator">-->
              <!--<option v-for="item in accountTypeList" :value="item.value">{{item.label}}</option>-->
            <!--</select>-->
          <!--</mt-cell>-->
          <template v-if="storeType!=3506">
          <mt-cell class="cell-switch" title="店长标志" >
            <mt-switch v-model="form.isShopKeeper"></mt-switch>
          </mt-cell>
          <mt-cell class="cell-switch" title="技师标志" >
            <mt-switch v-model="form.isWorker"></mt-switch>
          </mt-cell>

          <mt-cell class="cell-switch" title="销售员标志" >
            <mt-switch v-model="form.isSales"></mt-switch>
          </mt-cell>
          <mt-cell class="cell-switch" title="采购员标志" >
            <mt-switch v-model="form.isBuyer"></mt-switch>
          </mt-cell>
          </template>
          <!--<div class="other-tips">其它信息（非必填）-->
            <!--<mt-button class="action-show" type="primary" @click="showMore=!showMore">-->
              <!--<template v-if="showMore">展开</template>-->
              <!--<template v-else>收起</template>-->
            <!--</mt-button>-->
          <!--</div>-->
          <!--<template v-if="showMore">-->
          <!--<mt-field label="入职日期" placeholder="请输入职日期" v-model="form.birthday"></mt-field>-->
          <!--<mt-field label="生日" placeholder="请输入生日" v-model="form.birthday"></mt-field>-->
          <!--<mt-field label="学历" placeholder="请输入学历" v-model="form.birthday"></mt-field>-->
          <!--<mt-field label="技能" placeholder="请输入技能" v-model="form.birthday"></mt-field>-->
          <!--<mt-field label="备注" placeholder="请输入备注" v-model="form.birthday"></mt-field>-->
          <!--</template>-->
        </template>
        <div class="button-content">
          <div class="button-block-6">
            <mt-button type="default" @click="popupAdd = false">取消</mt-button>
          </div>
          <div class="button-block-6">
            <mt-button type="primary" @click="handleConfirm">确定</mt-button>
          </div>
        </div>
      </mt-popup>
      <mt-popup
        v-model="popupAddPart"
        position="right"
        class="popup-add">
        <template>
          <mt-field label="部门编号" placeholder="请输入部门编号" v-model="part.number"></mt-field>
          <mt-field label="部门名称" placeholder="请输入部门名称" v-model="part.name"></mt-field>
          <mt-field class="field-part" label="上级部门" placeholder="请选择上级部门" readonly="readonly" v-model="part.parentName" @click.native="handleSelectPart"></mt-field>
        </template>
        <div class="button-content">
          <div class="button-block-6">
            <mt-button type="default" @click="popupAddPart = false">取消</mt-button>
          </div>
          <div class="button-block-6">
            <mt-button type="primary" @click="handleConfirmPart">确定</mt-button>
          </div>
        </div>
      </mt-popup>
      <section class="app-footer navbar-fixed-bottom">
        <ul class="row">
          <li class="item"><span @click="handleAdd" class="btn-action">添加用户</span></li>
          <li class="item">
            <span @click="handleAddPart" class="btn-action">添加部门</span>
          </li>
        </ul>
      </section>
      <mt-popup
        v-model="popupShow"
        position="bottom" class="me-popup-part">
        <div v-if="popupAddPart" class="top-department" @click="handleSelectTopPart">
          <span class="node-expand iconfont icon-wenjian1" type="text"></span><span class="node-text">顶级部门</span></div>
        <Tree @selectPart="selectPart"
              @deletePart="deletePart"
              @editPart="editPart"
              :treeData="partList">

        </Tree>
        <div class="button-content button-content-add-part">
          <mt-button type="primary" @click="handleAddPart">添加部门</mt-button>
        </div>
      </mt-popup>
  </div>
  </div>
</template>
<script>
  import {Radio, Navbar,Button,MessageBox,Toast ,Checklist,Popup,Picker,Swipe, SwipeItem,Switch } from 'mint-ui';
  import Tree from '../common/tree.vue';
  export default {
    components:{
      Tree
    },
    data () {
      return {
        isShowPwd:true,
        showMore:false,
        partList:[],
        currentType:'0',
        userList: [],
        accountTypeList:[
          {
            value:'STOREEMP',
            label:'技师',
          },{
            value:'STOREADMIN',
            label:'店长',
          },],
        popupAdd:false,
        popupShow:false,
        popupAddPart:false,
        selectType:'',
        optionsCustomer:[],
        departmentList:[1],
        roleList:[],
        part:{
          id:'',
          number:'',
          name:'',
          parentName:'',
          parentId:'',
        },
        form:{
          id:'',
          phone:'',
          password:'',
          name:'',
          number:'',
          isSales:false,
          isBuyer:false,
          isShopKeeper:false,
          isWorker:true,
          storeName:'',
          storeType:'',
          selectedItem:[],
          departmentName:'',
          accountType:'STOREEMP',
          departmentId:'',
        }
      }
    },
    beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg");
    },
    mounted(){
      document.getElementsByTagName("body")[0].className="add_bg";


      this.storeType=sessionStorage.getItem('storeType');
      this.getData();
    },
    methods:{
      getData(){
        this.$axios({
          method: 'post',
          url:'gp/util/ajax!getBdTree.do?bdType=bu_department.department_id.departmentName',
        }).then((res)=>{
          this.partList=res.data;
          console.log(this.partList,12313)
      })

        this.$axios({
          method: 'post',
          url:'gp/app/userFront!getUserList.do',
        }).then((res)=>{
        if(res.data.statusCode==200){
          this.userList=res.data.object
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:800
          });
        }
      })
      },
      handleAdd(){
        this.form={
            id:'',
            phone:'',
            name:'',
            departmentName:'',
            departmentId:'',
            isSales:false,
            isBuyer:false,
          isShopKeeper:false,
          isWorker:true,
          accountType:'STOREEMP',
        };
        this.isShowPwd=true;
        this.popupAdd=true;
      },
      handleAddPart(){
        this.part={
            id:'',
            number:'',
            name:'',
            parentName:'',
            parentId:'',
        };
        this.popupAddPart=true;
        this.popupShow=false;

      },
      handleEdit(item){
        console.log(item)

        this.isShowPwd=false;
        var params = new URLSearchParams();
        params.append('userForm.userId', item.id);
        this.$axios({
          method: 'post',
          url:'gp/app/userFront!getUser.do',
          data:params
        }).then((res)=>{
          console.log(res)
          if(res.data.statusCode==200){
            const resData=res.data.object
            this.form={
              id:resData.userId,
              phone:resData.code,
              name:resData.name,
              departmentName:resData.departmentName,
              departmentId:resData.departmentId,
            };
            if(resData.isSales=='0101'){
              this.form.isSales=true
            }else{
              this.form.isSales=false
            }
            if(resData.isBuyer=='0101'){
              this.form.isBuyer=true
            }else{
              this.form.isBuyer=false
            }

            if(resData.isShopKeeper=='0101'){
              this.form.isShopKeeper=true
            }else{
              this.form.isShopKeeper=false
            }
            if(resData.isWorker=='0101'){
              this.form.isWorker=true
            }else{
              this.form.isWorker=false
            }
            this.popupAdd=true;
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:800
          });
        }
      })

      },
      handleSelectPart(){
        this.popupShow=true;
      },
      selectPart(data){
      this.popupShow=false;
        this.form.departmentName=data.text;
        this.part.parentName=data.text;
        this.form.departmentId=data.id;
        this.part.parentId=data.id;

//        console.log(data)
      },
      handleSelectTopPart(){
        this.popupShow=false;
        this.part.parentName='顶级部门';
        this.part.parentId='';
      },
      deletePart(data){
        MessageBox({
          title: '',
          message: '确认是否删除该部门?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){

          var params = new URLSearchParams();
          params.append('form.departmentId', data.id);
          this.$axios({
            method: 'post',
            url:'gp/bu/department!deleteDepartment.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true){
            this.getData();
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration:800
            });
          }

        })

        };
      })
      },
      editPart(data){

        console.log(data)

        var params = new URLSearchParams();
        params.append('departmentForm.departmentId', data.id);
        this.$axios({
          method: 'post',
          url:'gp/app/userFront!getDepart.do',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          const resData=res.data.object
          this.part={
            id:resData.departmentId,
            number:resData.departmentCode,
            name:resData.departmentName,
            parentName:resData.parentName,
            parentId:resData.parentId,
          };
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:800
          });
        }

        })
        this.popupShow=false;
        this.popupAdd=false;
        this.popupAddPart=true;
      },
      handleConfirmPart(){
        if(this.part.number==''){
          Toast({
            message: '请输入部门编号',
            position: 'middle',
            duration: 1000
          });
          return false;
        }
        if(this.part.name==''){
          Toast({
            message: '请输入部门名称',
            position: 'middle',
            duration: 1000
          });
          return false;
        }
        var params = new URLSearchParams();
        if(this.part.id!=''){
          params.append('form.departmentId', this.part.id);
        }
        params.append('form.departmentCode', this.part.number);
        params.append('form.departmentName', this.part.name);
        params.append('form.parentId', this.part.parentId);
        this.$axios({
          method: 'post',
          url:'gp/bu/department!saveDepartment.do',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          this.popupAddPart=false
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.getData();
        }else{
          this.popupAddPart=false
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 2000
          });
        }
      })
      },
      handleRemove(item){
        MessageBox({
          title: '',
          message: '确认是否删除该用户?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){
          var params = new URLSearchParams();
          params.append('form.userId',item.id);
          this.$axios({
            method: 'post',
            url:'gp/sys/user!deleteUser.do',
            data:params
          }).then((res)=>{
          if(res.data.statusCode==200){
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
            this.getData();
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
          }
        })
        };
      })
      },
      handleStop(index,item){
        MessageBox({
          title: '',
          message: '确认是否禁用?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){
          var params = new URLSearchParams();
          params.append('userId',item.userId);
          params.append('id',item.id);
          params.append('userType',0);

          this.$axios({
            method: 'post',
            url:'gp/app/userFronts/reloadUser',
            data:params
          }).then((res)=>{
          if(res.data.statusCode==200){
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
            this.getData();
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
          }
        })
        };
      })
      },
      handleConfirm(){
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if(this.form.phone==''){
          Toast({
            message: '请输入手机号码',
            position: 'middle',
            duration: 1000
          });
          return false;
        }

        if(!myreg.test(this.form.phone)){
          Toast({
            message: '请输入有效的手机号码',
            position: 'middle',
            duration: 1000
          });
          return false;
        }
        if(this.form.name==''){
          Toast({
            message: '请输入员工姓名',
            position: 'middle',
            duration: 1000
          });
          return false;
        }
        var params = new URLSearchParams();
        if(this.form.id==''){
          params.append('form.bartererCode', 'NewBill');
        }else{
          params.append('form.userId', this.form.id);
        }
        params.append('form.code', this.form.phone);
        params.append('form.name', this.form.name);
        params.append('form.departmentId', this.form.departmentId);
        var myisSales='';
        var myisBuyer='';
        var myisShopKeeper='';
        var myisWorker='';
        if(this.form.isSales==false){
          myisSales='0102';
        }else{
          myisSales='0101';
        }
        if(this.form.isBuyer==false){
          myisBuyer='0102';
        }else{
          myisBuyer='0101';
        }
        if(this.form.isShopKeeper==false){
          myisShopKeeper='0102';
        }else{
          myisShopKeeper='0101';
        }
        if(this.form.isWorker==false){
          myisWorker='0102';
        }else{
          myisWorker='0101';
        }
        params.append('form.isSales', myisSales);
        params.append('form.isBuyer', myisBuyer);
        params.append('form.isShopKeeper', myisShopKeeper);
        params.append('form.isWorker', myisWorker);
        this.$axios({
          method: 'post',
          url:'gp/sys/user!saveUser.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true){
          this.popupAdd=false
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.getData();
        }else{
//          this.popupAdd=false
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
        }
      })
      },
      handleStart(index,item){
        MessageBox({
          title: '',
          message: '确认是否启用?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){
          var params = new URLSearchParams();
          params.append('userId',item.userId);
          params.append('id',item.id);
          params.append('userType',1);

          this.$axios({
            method: 'post',
            url:'gp/app/userFronts/reloadUser',
            data:params
          }).then((res)=>{
          if(res.data.statusCode==200){
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
            this.getData();
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
          }
        })
        };
      })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .mint-toast{
    z-index:100000
  }
  .app-add-user .app-main{
    padding: 0 0 48px;
  }
  .app-add-user .picker-item{
    color:#999
  }
  .app-add-user .picker-item.picker-selected{
    color:#c34853
  }
  .button-content{
    text-align: center;
  }
  .me-popup-part{
    width: 100%;
    min-height: 40%;
    max-height: 100%;
    padding:12px 16px;
    overflow: auto;
  }
  .app-add-user .popupResult .item-select{
    padding:0;
  }
  .app-add-user .popupResult .item-select .mint-cell-value{
    margin-right:0;
    padding:12px 6px;
    flex:1;
  }
  .app-add-user .popupResult .item-select .mint-cell-title{
    flex:none;
  }
  .app-add-user{
    background: #fff;
    /*padding:0 16px 16px;*/
  }
  .app-add-user .module-action{
    padding:14px;
    /*text-align: right;*/
  }
  .app-add-user .module-action .mint-button{
    padding:0 24px;
  }
  .module-user-list{
    width: 100%;
    font-size: 14px;
    /*border:1px solid #eee;*/
    border-collapse:collapse;
  }
  .module-user-list .user-list-header .user-item{
    background-color: #f8f8f8;
    padding:12px 6px;
  }
  .module-user-list .user-item{
    padding:6px;
    border:1px solid #eee;
    text-align: center;
  }
  .app-add-user .mint-button{
    padding:0 16px;
    font-size: 15px;
  }
  .app-add-user .module-user-list .mint-button{
    margin:0 0 6px;
  }
  .app-add-user .popup-add{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding:10px 0;
  }
  .app-add-user .popup-add .mint-cell-wrapper{
    background:none;
  }
  .app-add-user .popup-add .mint-cell-title{
    width:84px !important;
    line-height: 22px;
    font-size: 16px;
  }
  .app-add-user .popup-add .mint-cell .mint-field-core{
    font-size: 16px;
  }
  .app-add-user .popup-add .mint-cell{
    background:none;
    padding:6px 0;
    border-bottom:1px solid #eee;
    min-height:inherit
  }
  .app-add-user .popup-add .mint-cell-value{
    padding:6px 8px;
    border-radius:6px
  }
  .app-add-user .popup-add .item-select{
    padding:0;
  }
  .app-add-user .popup-add .item-select .mint-cell-value{
    margin-right:0;
    padding:12px 6px;
    flex:1;
  }
  .app-add-user .popup-add .item-select .mint-cell-title{
    flex:none;
  }
  .app-add-user .popup-add .other-tips{
    background: #f5f5f5;
    padding:12px 12px 10px;
    font-size: 15px;
    color: #888;
    overflow: hidden;
  }
  .app-add-user .button-content{
    background: #fff;
    font-size:0;
    padding:24px;
    box-shadow: 0px -6px 6px 0px rgba(0, 0, 0, 0.03);
  }
  .app-add-user .button-content-add-part{
    box-shadow: none;
    padding:20px 24px;
    border-top:1px solid #eee;

  }
  .app-add-user .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .app-add-user .button-block-6 .mint-button{
    display: block;
    width: 100%;
  }
  .me-popup .button-content .mint-button{
    width: 48%;
  }

  .app-add-user .select-role-list .mint-cell{
    background:none;
    display:inline-block;
    width:50%;
  }
  .app-add-user .select-role-list .mint-cell .mint-cell-wrapper{
    background:none;
    padding: 0;
  }
  .app-add-user .select-role-list .mint-checklist-label{
    padding: 0;
  }
  .app-add-user .select-role-list .mint-cell-value{
    border:none;
  }
  .app-add-user .item-role .mint-cell-value{
    border:none;
  }
  .app-add-user .item-role .mint-checklist-title{
    margin: 0;
  }
  .app-add-user .select-operator{
    width: 100%;
    min-height:32px;
    border:none;
    outline:none;
    font-size: 16px;
    color: #666;
  }

  .app-add-user .app-footer {
    background: #007EE5;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 768px;
    margin: 0 auto;
    font-size: 0;
    border-top: 1px solid #eee; }
  .app-add-user .app-footer .item {
    display:inline-block;
    width:50%;
    font-size:16px;
    color: #fff;
    text-align: center;
    border-right: 1px solid #eee;

  }
  .app-add-user .app-footer .item:last-child {
    border-left: none; }
  .app-add-user .app-footer .btn-action{
    display: block;
    padding:12px 0;
    color: #fff;
  }
  .app-add-user .module-list .iconfont{
    padding:0 4px;
  }
  .app-add-user .module-list .icon-bianji{
    color: #007EE5;
    font-size: 20px;

  }
  .app-add-user .module-list .icon-shanchu{
    font-size: 26px;

  }
  .app-add-user .module-list-none{
    padding:90px 0 0;
    font-size: 22px;
    color: #999;
    text-align: center;

  }
  .field-part .mint-field-clear{
    display: none;
    opacity: 0;

  }
  .app-add-user .action-show{
    float: right;
    height: 28px;
  }
</style>
